<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/26
  Time: 11:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单展示页面</title>
    <link rel="stylesheet" href="admin/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="admin/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="admin/css/notifications/Lobibox.min.css">
    <script src="admin/js/vue.js"></script>
    <script src="admin/js/jquery.min.js"></script>
    <script src="admin/js/bootstrap.min.js"></script>
    <script src="admin/js/notifications/Lobibox.js"></script>
    <script src="admin/js/jquery.cookie.min.js"></script>
    <script src="admin/js/calendar/moment.min.js"></script>
    <style>
        .navbar-text a {
            color: #ffffff;
        }

        .login-text {
            margin-right: 50px;
        }

        .table tr:first-child {
            background-color: #e2e2e2;
            font-weight: 600;
        }

        .tab-content {
            padding-top: 24px;
        }

        .tr2 {
            background-color: #e2e2e2;
            font-weight: 600;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="index.jsp" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i>
                寻欢易购</a>

        </div>
        <p class="navbar-text navbar-right login-text">
            <a id="loginText" href="login.jsp">登录</a>
        </p>
        <p class="navbar-text navbar-right login-text right">
        <ul class="nav navbar-nav mai-top-nav header-right-menu navbar-right" id="admin-index" hidden>
            <li class="nav-item">
                <a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle">

                    <span class="admin-name" id="admin-name"></span>
                </a>
                <ul role="menu" class="dropdown-header-top author-log dropdown-menu animated zoomIn">
                    <li><a href="login-again.jsp"><span class="edu-icon edu-home-admin author-log-ic"></span>切换用户</a>
                    </li>
                    <li><a href="cart.jsp"><span class="edu-icon edu-user-rounded author-log-ic"></span>购物车</a>
                    </li>
                    <li><a href="showOrder.jsp"><span class="edu-icon edu-money author-log-ic"></span>我的订单</a>
                    </li>
                    <li><a href="admin/loginAdmin.jsp"><span
                            class="edu-icon edu-settings author-log-ic"></span>后台登录管理</a>
                    </li>
                    <li><a href="index.jsp" onclick="UserQuit()"><span class="edu-icon edu-locked author-log-ic"></span>退出</a>
                    </li>
                </ul>
            </li>
        </ul>
        <p class="navbar-text navbar-right">
            <a href="register.jsp">注册</a>
        </p>
    </div>
</nav>

<%--    </div>--%>

<%--</nav>--%>
<div class="container">
    <div class="row">
        <div class="col-xs-8 col-xs-push-2">
            <ul class="nav nav-tabs" id="orderTabs">
                <li class="active"><a id="0" href="#unpayOrders">未支付订单</a></li>
                <li><a id="1" href="#payedOrders">已支付订单</a></li>
                <li><a id="2" href="#expiredOrders">已取消订单</a></li>
            </ul>
            <div class="tab-content" id="app">
                <div id="unpayOrders" class="tab-pane active">
                    <table class="table" v-for="order in unpayedOrders">
                        <tr>
                            <td colspan="4">订单日期: {{order.createTime | formatDate}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span class="timeRunning"></span><br>
                                订单编号: {{order.orderNo}}
                            </td>
                        </tr>
                        <tr class="tr2">
                            <td>商品描述</td>
                            <td>&nbsp; &nbsp;价格</td>
                            <td>数量</td>
                            <td></td>
                        </tr>
                        <!--                            <tr v-for="g in goods">-->
                        <tr v-for="o in order.orders">
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" :src="o.goodsImg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">{{o.goodsTitle}}</h4>
                                    </div>
                                </div>
                            </td>
                            <td>￥{{o.goodPrice}}</td>
                            <td>&nbsp; &nbsp;{{o.goodNum}}</td>
                        </tr>
                        <tr>
                            <td>
                                <button id="b1" type="button" onclick="deleteOrderByOrderNo(this)"
                                        class="btn btn-danger" :oNo="order.orderNo">取消订单
                                </button>
                                <button id="b2" type="button" onclick="continuePay(this)" class="btn btn-success"
                                        :oNo="order.orderNo" :orderAmout="order.orderMoney">继续支付
                                </button>
                                <span style="float:right">总金额：{{order.orderMoney}}元</span>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="payedOrders" class="tab-pane">
                    <table class="table" v-for="order in payedOrders">
                        <tr>
                            <td colspan="4">订单日期: {{order.createTime | formatDate}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号:
                                {{order.orderNo}}
                            </td>
                        </tr>
                        <tr class="tr2">
                            <td>商品描述</td>
                            <td>&nbsp; &nbsp;价格</td>
                            <td>数量</td>
                            <td></td>
                        </tr>
                        <!--                            <tr v-for="g in goods">-->
                        <tr v-for="o in order.orders">
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" :src="o.goodsImg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">{{o.goodsTitle}}</h4>
                                    </div>
                                </div>
                            </td>
                            <td>￥{{o.goodPrice}}</td>
                            <td> &nbsp; &nbsp;{{o.goodNum}}</td>
                        </tr>
                        <tr>
                            <td><span>总金额：{{order.orderMoney}}元</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
                <div id="expiredOrders" class="tab-pane">
                    <table class="table" v-for="order in expiredOrders">
                        <tr>
                            <td colspan="4">订单日期: {{order.createTime | formatDate}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单编号:
                                {{order.orderNo}}
                            </td>
                        </tr>
                        <tr class="tr2">
                            <td>商品描述</td>
                            <td>&nbsp; &nbsp;价格</td>
                            <td>数量</td>
                            <td></td>
                        </tr>
                        <!--                            <tr v-for="g in goods">-->
                        <tr v-for="o in order.orders">
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" :src="o.goodsImg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">{{o.goodsTitle}}</h4>
                                    </div>
                                </div>
                            </td>
                            <td>￥{{o.goodPrice}}</td>
                            <td>&nbsp; &nbsp;{{o.goodNum}}</td>
                        </tr>
                        <tr>
                            <td><span>总金额：{{order.orderMoney}}元</span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="payModal" data-backdrop="static">
    <div class="modal-dialog" style="margin-top: 120px;">
        <div class="modal-content">
            <div class="modal-header">
                <button onclick="destoryPayModal()" class="close">
                    <span>&times;</span>
                </button>
                <h3 class="modal-title">支付信息</h3>
            </div>
            <div class="real-name-con margin-tb-25 clearfix">
                <div style="height: 30px"></div>
                <div class="content-right-zoon">
                    &nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: large; color: #933EC5">支付类型：</span>
                    <input id="zfb" name="pay" checked value="1"  type="radio"> <label for="zfb"><img style="height: 30px" src="images/zfb.png">&nbsp;<img style="height: 16px" src="images/tuijian.png"></label>
                    <input id="wx" name="pay"  value="2" type="radio" style="margin-left: 20px;"> <label for="wx"><img style="height: 30px" src="images/wx.png"></label>

                </div>
            </div>
            <div class="modal-body">
                <input type="hidden" id="orderNo">
                <h4 style="font-weight: 800;"><span>应付金额: </span>￥<span style="color: red;" id="totalPrice"></span></h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" onclick="destoryPayModal()">取消支付</button>
                <button type="button" onclick="toAliPay()" class="btn btn-success">去支付</button>
                <%--                <button type="button" onclick="confirmPay()" class="btn btn-success">确认支付</button>--%>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    if ($.cookie('frontedUsername')) {
        // $('#loginText').html('欢迎你，' + $.cookie('frontedUsername'))
        $('#loginText').hide()
        $('#admin-name').html('欢迎你，' + $.cookie('frontedUsername'))
        $('#loginText').prop('href', 'javascript:void(0);')
        $('#admin-index').show()

    }

    Vue.filter('formatDate', function (value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
    })

    var vm = new Vue({
        el: '#app',
        data: {
            unpayedOrders: [], //未支付订单
            payedOrders: [], //已支付订单
            expiredOrders: [] //已取消订单
        }
    })
    //用来计算未支付订单是否超时
    var obj = [];
    var orderNo = $('#b1').attr('oNo');
    var orderNo = $('#b2').attr('oNo');
    // var totalPrice = $('#b2').attr('totalPrice');
    // var price = $('#b2').attr('price');
    // var num = $('#b2').attr('num');

    function getOrders(status) {
        $.ajax({
            url: '${pageContext.servletContext.contextPath}/order/getOrdersByStatus',
            type: 'get',
            dataType: 'json',
            data: {status: status, method: 'getOrdersByStatus'},
            success: function (_data) {
                // console.log(this)
                if ('1' == status) {  //表示已支付订单
                    vm.payedOrders = [];
                    for (var i = 0; i < _data.length; i++) {
                        vm.payedOrders.push(_data[i]);
                    }
                } else if ('0' == status) { //未支付订单
                    vm.unpayedOrders = [];
                    console.log(_data)
                    for (var i = 0; i < _data.length; i++) {
                        dateTime = new Date(_data[i].createTime);
                        var nowTime = new Date();
                        //未支付订单时间加1天
                        dateTime = dateTime.setDate(dateTime.getDate() + 1)
                        //当前时间是否大于未支付订单时间
                        console.log(_data[i].orders);
                        if (nowTime >= dateTime) {
                            //未支付订单订单转为取消订单
                            changeOrderByOrderNo(_data[i].orders[0].orderNo)
                        } else {
                            obj.push(dateTime);
                            vm.unpayedOrders.push(_data[i]);
                        }
                    }
                } else if ('2' == status) {
                    vm.expiredOrders = [];
                    for (var i = 0; i < _data.length; i++) {
                        vm.expiredOrders.push(_data[i]);
                    }
                }
            }
        })
    }

    getOrders(0);  //默认获取未支付订单

    // 当用户点击的时候触发
    $('#orderTabs a').click(function () {
        // $(this).parent('.active'); //当前标签包含了 active 这个class的父标签
        if ($(this).parent('.active').length == 0) { //如果找到的话，就表示当前标签处于未激活状态
            var status = $(this).prop('id');  //取到当前的tab的id, 与订单的状态是一致的
            console.log(status)
            getOrders(status);
            $(this).tab('show');   // 让对应的tab展示
        }
    })

    //未支付订单订单转为取消订单
    function changeOrderByOrderNo(orderNo) {
        $.ajax({
            url: '${pageContext.servletContext.contextPath}/order/changeOrderByOrderNo',
            type: 'get',
            dataType: 'json',
            data: {orderNo: orderNo, method: 'changeOrderByOrderNo'},
            success: function (_data) {
            }
        })
    }

    //根据订单编号取消订单
    function deleteOrderByOrderNo(tags) {
        var orderNo = $(tags).attr('oNo');
        // console.log(orderNo)
        if (confirm("确定要删除订单编号【" + orderNo + "】的数据?")) {
            $.ajax({
                url: '${pageContext.servletContext.contextPath}/order/deleteOrderByOrderNo',
                type: 'get',
                dataType: 'json',
                data: {orderNo: orderNo, method: 'deleteOrderByOrderNo'},
                success: function (_data) {
                    window.location.href = 'showOrder.jsp#unpayOrders';
                    // getOrders(0)
                }
            })
            location.reload()
        }
    }
        //继续支付
        function continuePay(tags) {
            var orderNo = $(tags).attr('oNo');
            $('#orderNo').val(orderNo)
            var totalPrice = $(tags).attr('orderAmout');
            $('#totalPrice').val(totalPrice)
            document.getElementById('totalPrice').innerText = totalPrice;
            $('#totalPrice').val(totalPrice);
            $('#payModal').modal('show');
        }

        //选择支付方式
        function toAliPay() {
            var ono = $('#orderNo').val();
            var totalPrice = $('#totalPrice').val();
            console.log(ono);
            console.log(totalPrice);
            var pay = $("input[name='pay']:checked").val();

            // 支付宝支付：创建form表单，以json格式传四个参数
            switch (pay) {
                case '1':
                    // localStorage.setItem("orderNo",orderNo);
                    // localStorage.setItem("totalPrice",totalPrice);
                    // location.href="alipay.trade.page.pay.jsp";
                    var aipay = document.createElement("form");
                    aipay.action = "alipay.trade.page.pay.jsp";
                    aipay.method = "post";
                    aipay.style.display = "none";
                    var PARAMS = {
                        "WIDout_trade_no": ono,
                        "WIDsubject": "Living Goods",
                        "WIDtotal_amount": totalPrice,
                        "WIDbody": "XunHuanShop"
                    }
                    for (var x in PARAMS) {
                        var opt = document.createElement("textarea");
                        opt.name = x;
                        opt.value = PARAMS[x];
                        aipay.appendChild(opt);
                    }
                    document.charset = 'utf-8';
                    document.body.appendChild(aipay);
                    aipay.submit();
                    break;
                // 微信支付
                case '2':
                    localStorage.setItem("orderNo", ono);
                    localStorage.setItem("totalPrice", totalPrice);
                    location.href = "wxpay.html";
                    break;
            }

    }
        // 关闭支付模态框
        function destoryPayModal() {
            $('#payModal').modal('hide');
            location.href = 'showOrder.jsp';
        }


        function UserQuit() {
            console.log("UserQuit");
            $.cookie('frontedUsername', '', path = '/')
            localStorage.setItem('local_shopping_cart', '{}');

            //刷新当前页面
            // location.reload();
        }


        var timer = null;
        var timeShow = document.getElementsByClassName('timeRunning')

        function timeRunning() {
            console.log(obj)
            setInterval(function test() {
                for (let i = 0; i < obj.length; i++) {
                    const t1 = new Date(obj[i] + 86400000);
                    if (new Date(t1) - new Date() <= 0) {
                        clearInterval(timer);
                    } else {
                        var h = cd(t1, new Date(), 'h');
                        var m = cd(t1, new Date(), 'm');
                        var s = cd(t1, new Date(), 's');
                        timeShow[i].innerHTML = '剩余:' + h + '时' + m + '分' + s + '秒,' + "自动取消订单";
                    }
                }
            }, 1000);
        }

        function cd(t1, t2, tg) {
            //相差的毫秒数
            var ms = Date.parse(t1) - Date.parse(t2);
            var minutes = 1000 * 60;
            var hours = minutes * 60;
            var days = hours * 24;
            // var years = days * 365;
            //求出天数
            // var d = Math.floor(ms / days);
            //求出除开天数，剩余的毫秒数
            ms %= days;
            var h = Math.floor(ms / hours);
            ms %= hours;
            var m = Math.floor(ms / minutes);
            ms %= minutes;
            var s = Math.floor(ms / 1000);
            //返回所需值并退出函数
            switch (tg) {
                case 'd':
                    return d;
                case 'h':
                    return h;
                case 'm':
                    return m;
                case 's':
                    return s;
            }
        }
        timeRunning();




</script>
</html>
